<template>
	<view class="content">
		<!-- 新闻分类 -->
		<view class="news-cate">
			<u-tabs @click="tabClick" :list="list4" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
			            color: '#303133',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
		</view>
		<!-- 置顶新闻轮播 -->
		<!-- <u-swiper :list="list2" keyName="banner" showTitle :autoplay="false" circular></u-swiper> -->
		<u-swiper :list="list1"  @click="click" ></u-swiper>
		<!-- 新闻列表 -->
		<view class="news-list">
			<scroll-view class="table" scroll-y style="height: 1100rpx;;">
				<view class="new-item" v-for="(item,index) in newsList" @click="goNewsDetail(item.id)">
					<view class="new-item-left">
						<view class="new-item-title">
							<!-- <u-tag text="头条" plain size="mini" type="warning" v-if="index == 0"></u-tag>
						<u--text :text="item.name" lines="2" color="rgb(51,51,51)" size="30rpx" :bold="true"></u--text> -->
							<view class="">
								<text
									style="width: 40rpx;height: 15rpx;background-color:  rgb(249,52,66); padding: 0rpx 14rpx ;color: rgb(255, 255, 255);font-size: 24rpx;"
									v-if="index == 0">头条</text>
								<text style="color: rgb(51,51,51);padding: 10rpx 4rpx 10rpx;font-size: 30rpx;text-decoration: none;
						font-weight: bold;
						word-wrap: normal;">{{item.name}}</text>

							</view>
						</view>
						<view>
							<u--text :text="item.remark" lines="2" color="rgb(190,190,190)" size="25rpx"></u--text>
						</view>
						<view class="new-item-time">
							<view class="building">
								<u--text :prefixIcon="building" :text="item.sender" align="left" size="20rpx"
									:iconStyle="{width:20+'rpx',height:20+'rpx'}" color="#999999" lines="1"></u--text>
							</view>
							<text class="new-item-time-line">|</text>
							<u--text :text="item.timeBefore" size="20rpx" color="#999999" align="left"></u--text>

						</view>
					</view>
					<view class="new-item-right">
						<u--image :src="item.cover" width="220rpx" height="138rpx" :showMenuByLongpress="false">
						</u--image>
					</view>
				</view>
				<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
					:nomore-text="nomoreText" @loadmore="loadNewsList" />
				<view class="" style="width: 100%; height: 30rpx;">

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	const index = require('@/api/index/index.js')
	let page = 1
	export default {
		data() {
			return {
				newsList: [],
				building: this.$https.assetsPath + '48c89be73bd5b5100d62d9e224efd88047b262fa.png',
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '点击加载更多',
				nomoreText: '实在没有了',
				list4: [],
				list1: [],
				mark: '',
				mark_id: '',
				page: 1,
				limit: 3,
				totalPage: 0
			};
		},
		onLoad() {
			let that = this
			that.getInfoList()
			that.getBanner()
		},
		methods: {
		async getBanner() {
			let that = this
			let data = {
				app_id: this.$https.weixinAppId,
				project_id: getApp().globalData.projectId,
			}
			let result = await index.getBanner(data)
			if (result.code == 1) {
				this.list1 = result.data.result
				
			}
		},
			tabClick(index) {
				this.newsList = []
				this.products = index.products;
				this.mark = index.name
				this.mark_id = index.id
				this.limit = 3
				this.page = 1
				this.status = 'loadmore'
				this.getIndustryInfoMore()
			},
			async getInfoList() {
				let that = this
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				}
				let result = await index.getInfoList(data)
				if (result.code == 1) {
					this.list4 = result.data.result
					// this.list2 = result.data.result
					this.mark = result.data.result[0].name
					this.mark_id = result.data.result[0].id
					that.getIndustryInfoMore()
				}
			},

			async getIndustryInfoMore() {
				let that = this
				if (this.page === 1) that.newsList = [];
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					mark: this.mark,
					mark_id: this.mark_id,
					page: this.page,
					limit: this.limit
				}
				let result = await index.getIndustryInfoMore(data)
				if (result.code == 1) {
					that.newsList = result.data.result.lists
					// that.newsList = that.newsList.concat(result.data.result.lists); 
					that.totalPage = result.data.result.last_page
				}
			},
			async getIndustryInfoMores() {
				let that = this
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					mark: this.mark,
					mark_id: this.mark_id,
					page: this.page,
					limit: this.limit
				}
				let result = await index.getIndustryInfoMore(data)
				if (result.code == 1) {
					// if (result.data.result.length > 0) {
					// 	that.status = 'loadmore'
					// 	result.data.result.forEach((item, index) => {
					// 		that.newsList.push(item)
					// 	})
					// } else {
					// 	that.status = 'nomore'
					// }
					that.status = 'loadmore'
					that.newsList = that.newsList.concat(result.data.result.lists);
					if (that.page >= this.totalPage) {
						this.status = 'nomore'
						return;
					}

				}
				// else {
				// 	if (result.data.result.length == 0) {
				// 		that.status = 'nomore'
				// 	}
				// }
			},
			goNewsDetail(id) {
				uni.navigateTo({
					url: '/pages/newsDetailPages/newsDetailPages?id=' + id
				})
			},
			loadNewsList() {
				let that = this
				if (that.page >= this.totalPage) {
					this.status = 'nomore'
					return;
				}

				that.status = 'loading'
				// let limit = 3
				// ++page
				// this.list += 3;
				this.page = ++this.page;
				if (this.page >= 3) this.status = 'nomore';
				else this.status = 'loading';
				that.getIndustryInfoMores()
			}
		}
	}
</script>

<style lang="scss">
	.news-list {
		width: 100%;
		height: 100%;
		margin-top: 20rpx;
	}

	.new-item {
		display: flex;
		width: 96%;
		height: 200rpx;
		padding-left: 20rpx;
		margin-top: 20rpx;
	}

	.new-item-title {
		display: flex;
		width: 420rpx;
	}

	.new-item-title /deep/ .u-tag {
		margin-right: 20rpx !important;
	}

	.new-item-time {
		display: flex;
	}

	.new-item-time-line {
		font-size: 20rpx;
		color: #999999;
	}

	.new-item-time /deep/ .u-text__value {
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.new-item-left {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.new-item-right {
		margin-left: auto;
		padding-top: 31rpx;
		padding-left: 42rpx;
	}

	/deep/ .u-icon__icon {
		color: #FFBE0D !important;
	}

	.building {
		width: 200rpx;
	}

	.news-cate {
		margin-bottom: 10rpx;
	}
</style>
